<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/amazeui.min.css" />
<title>搜索结果</title>
<style type="text/css">
.am-container {
	width: 1000px !important;
	max-width: none;
}
</style>
</head>
<body>
	<!-- header start -->
	<header class="am-topbar">
	<div class="am-container">
		<h1 class="am-topbar-brand">
			<a href="/">走失宠物搜救系统</a>
		</h1>

		<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
			<ul class="am-nav am-nav-pills am-topbar-nav">
				<li class="am-active"><a href="#">搜索结果</a></li>
			</ul>

			<div class="am-topbar-right">
				<div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
					<button
						class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle"
						data-am-dropdown-toggle>
						操作 <span class="am-icon-caret-down"></span>
					</button>
					<ul class="am-dropdown-content">
						<li><a href="${pageContext.request.contextPath}/my/user/toChildrenEdit.do">报案</a></li>
						<li><a href="${pageContext.request.contextPath}/my/event/myEvent.do">我的事件</a></li>
					</ul>
				</div>
			</div>
			<c:if test="${empty user.id}">
				<div class="am-topbar-right">
					<a href="${pageContext.request.contextPath}/account.jsp" class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">注册</a>
				</div>
				<div class="am-topbar-right">
					<a href="${pageContext.request.contextPath}/login.jsp" class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">登录</a>
				</div>
			</c:if>
		</div>
	</div>
	</header>
	<!-- header end -->
	<div class="am-container">
		<div class="am-g">
			<div class="am-u-sm-12">
				<table class="am-table am-table-striped am-table-hover table-main am-text-nowrap">
					<thead>
						<tr>
							<th>失联宠物姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>失踪地点</th>
							<th>失踪时间</th>
							<th>详情</th>
						</tr>
					</thead>
					<tbody id="eventTable">
						<c:forEach items="${list}" var="event">
							<tr>
								<td>${event.children.name }</td>
								<td>${event.children.age }岁</td>
								<c:if test="${event.children.sex==1}">
									<td>男孩</td>
								</c:if>
								<c:if test="${event.children.sex==2}">
									<td>女孩</td>
								</c:if>
								<td>${event.event_point }</td>
								<td><fmt:formatDate value="${event.event_time }"
										pattern="yyyy-MM-dd HH:mm" /></td>
								<td>
									<div class="am-btn-toolbar">
										<div class="am-btn-group am-btn-group-xs">
											<a
												href="${pageContext.request.contextPath}/event/eventDetail.do?id=${event.id }"
												class="am-btn am-btn-default am-btn-xs am-text-secondary">
												<span class="am-icon-pencil-square-o"></span> 详情
											</a>
										</div>
									</div>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<ul class="am-pagination"></ul>
			</div>
		</div>
	</div>
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/amazeui-pagination.js"></script>
	<script type="text/javascript">
	var pagination = new Pagination({
		  wrap: $('.am-pagination'), // 存放分页内容的容器
		  count: ${total}, // 总页数
		  current: 1, // 当前的页数（默认为1）
		  prevText: '上一页', // prev 按钮的文本内容
		  nextText: '下一页', // next 按钮的文本内容
		  callback: function(page) { // 每一个页数按钮的回调事件
		    // page 为当前点击的页数
		    console.log("page="+page);
		  },
		  // 会发送 get 请求到 /api/xxx/page/page_number
		  // 或者你可以写成 /api/xxx?page= 插件发送的 url 为 /api/xxx?page=page_number
		  // page_number 为当前的页数
		  ajax: {
		    url: '${pageContext.request.contextPath}/getEvent.do?pageNum=',
		    // 你可以传入你需要的 queryString
		    data: {
		    },
		    success: function(result) {
		      // result 成功返回的结果
		      $('#eventTable').empty();
		      var data=$.parseJSON(result);
		      $.each(data,function(index,content){
		    	  if(content.children.sex==1){
		    		  var str='<td>男孩</td>';
		    	  }else{
		    		  var str='<td>女孩</td>';
		    	  }
		    	  $('#eventTable').append('<tr><td>'+content.children.name+'</td>'+'<td>'+content.children.age+'岁</td>'+str+'<td>'+content.event_point+'</td>'+'<td>'+content.event_time+'</td>'+'<td>'+content.police_name+'</td>'+'<td><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><a href="${pageContext.request.contextPath}/event/eventDetail.do?id='+content.id+'"class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 详情</a></div></div></td></tr>');
		      });
		    },
		    error: function(error) {
		      // error 失败返回的 message
		    	console.log("error="+error);
		    }
		  }
		});
	</script>
</body>
</html>